<%--
  Created by IntelliJ IDEA.
  User: Kohler
  Date: 2022/11/19
  Time: 22:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>注册</title>
  <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
  <style type="text/css">
    body{
      font-size: large;
      background: url('images/3.jpg')no-repeat ;
      background-size: 100% 130%;
    }
    .login-button { /* 按钮美化 */
      width: 270px; /* 宽度 */
      height: 40px; /* 高度 */
      border-width: 0px; /* 边框宽度 */
      border-radius: 3px; /* 边框半径 */
      background: #1E90FF; /* 背景颜色 */
      cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
      outline: none; /* 不显示轮廓线 */
      font-family: Microsoft YaHei; /* 设置字体 */
      color: white; /* 字体颜色 */
      font-size: 17px; /* 字体大小 */
    }
    .login-button:hover { /* 鼠标移入按钮范围时改变颜色 */
      background: #5599FF;
    }
    .radio_type{
      width: 20px;
      height: 20px;
      appearance: none;
      position: relative;
      outline: none;
    }
    .radio_type:before{
      content: '';
      width: 20px;
      height: 20px;
      border: 1px solid #7d7d7d;
      display: inline-block;
      border-radius: 50%;
      vertical-align: middle;
    }
    .radio_type:checked:before{
      content: '';
      width: 20px;
      height: 20px;
      border: 1px solid #c59c5a;
      background:#c59c5a;
      display: inline-block;
      border-radius: 50%;
      vertical-align: middle;
    }
    .radio_type:checked:after{
      content: '';
      width: 10px;
      height:5px;
      border: 2px solid white;
      border-top: transparent;
      border-right: transparent;
      text-align: center;
      display: block;
      position: absolute;
      top: 6px;
      left:5px;
      vertical-align: middle;
      transform: rotate(-45deg);
    }
    .radio_type:checked+label{
      color: #c59c5a;
    }

    #content{
      position: absolute;
      top: 38%;/*顶部到元素*/
      left:30%;
      width: 43%;
      height:650px;
      margin-top:-200;/*边缘到底部*/
      background-color: #34495e;
      text-align-last: center;
      /*这里做一个半透明效果*/
      filter:alpha(Opacity=60);
      -moz-opacity:0.8;
      opacity: 0.8;
    }
    .abc{
      appearance: none;
      text-align: center;
      height: 36px;
      width: 248px;
      border-radius: 15px;
      border: 0px solid #fff;
      padding: 0 8px;
      outline: 0;
      letter-spacing: 1px;
      color: black;
      font-weight: 600;
      background: white;
      border: 1px solid rgba(255,255,255,.15);
      box-shadow: 0 2px 3px 0 rgba(0,0,0,.1) inset;
      text-shadow: 0 1px 2px rgba(0,0,0,.1);
      -o-transition: all .2s;
      -moz-transition: all .2s;
      -webkit-transition: all .2s;
      -ms-transition: all .2s;
    }
  </style>
  <script type="text/javascript">
    $(function () {

      //刷新验证码
      $("#rest").click(function () {
        //更换src的值使验证码重新加载
        $(this).attr("src", "/imageGenerate?time" + new Date().getTime())
      })})
    $(function(){<!-- -->
      $("input[name='Usercode']").change(function(){<!-- -->
        let Usercode = $("input[name='Usercode']").val();
        $.post("<%= request.getContextPath()%>/CodeAjax",{<!-- -->
          Usercode : Usercode,
        },function(res){<!-- -->
          if(res=="yes"){<!-- -->
            $("#flagcode").empty();
            $("#flagcode").append("验证码正确！");
          }
          else{<!-- -->
            $("#flagcode").empty();
            $("#flagcode").append("验证码错误！");
          }
        })
      })
    })
  </script>
</head>
<body>
<div id="content">
  <h2 >学生注册</h2><br/>
  <form action="http://localhost:8080/Library/studentRegister"method="post" >
    <font size="4">&nbsp;&nbsp;学号&nbsp;</font><input type="text" class="abc" name="userid" id="userid" placeholder="请输入账号" />
    <font size="4">&nbsp;&nbsp;名字&nbsp;</font><input type="text"  class="abc" name="sname" id="sname" placeholder="请输入名字" /><br /><br/>
    <font size="4">&nbsp;&nbsp;性别&nbsp;</font><input type="radio" class="radio_type" name="sex" value="男" checked="checked"/>男<input type="radio" class="radio_type"  value="女" name="sex"/>女<br/><br/>
    <font size="4">&nbsp;&nbsp;电话&nbsp;</font><input type="text" class="abc" name="sphoneNumber" id="sphoneNumber" placeholder="请输入电话" />
    <font size="4">&nbsp;&nbsp;班级&nbsp;</font><input type="text" class="abc" name="sclass" id="sclass" placeholder="请输入班级" /><br /><br/>
    <font size="4">&nbsp;&nbsp;专业&nbsp;</font><input type="text" class="abc" name="smajor" id="smajor" placeholder="请输入专业" />
    <font size="4">&nbsp;&nbsp;学院&nbsp;</font><input type="text" class="abc"  name="scollege" id="scollege" placeholder="请输入学院" /><br /><br/>
    <font size="4">&nbsp;&nbsp;密码&nbsp;</font><input type="password" class="abc" name="password" id="password" placeholder="请输入密码" />
    <font size="4">确认密码</font><input type="password"class="abc"  name="confirmPassword" id="confirmPassword" placeholder="请再次输入密码" /><br /><br/>
    <font size="4">&nbsp;验证码&nbsp;</font><input type="text" class="abc" name="Usercode" id="ucode" placeholder="验证码" required="required"><font color="red"><div id="flagcode"></div></font><br/>
    <img id="codeimg" alt="Code" src="<%= request.getContextPath()%>/imageGenerate"  width="150" height="50">
    <a href=""  id="rest">
      <font color="#faebd7" >看不清楚</font>
    </a>
    <br/><br/>
    <input type="submit" name="denglu" id="denglu"  class="login-button" value="注册" />
    <a href="student/studentLogin.jsp">
      <font color="white"> 已注册？点此登录</font>
    </a>
  </form></div>
</body>
</html>
